![【VSCode】Markdownで書いたブログに目次を付ける!(Markdown TOC)](https://devio2023-media.developers.io/wp-content/uploads/2019/05/vscode-eyecatch.png)
【VSCode】Markdownで書いたブログに目次を付ける!(Markdown TOC)
サーバーレス開発部あらため、CX事業本部の藤井元貴です。
ブログが長くなると、目次を表示したいです。
そこで、Markdownでイイカンジに目次を作ってくれるVSCodeの拡張機能があったので、試してみました!
※ 本ブログ(Developers.IO)を想定しています。
目次
環境
項目 | バージョン |
---|---|
macOS | Mojave 10.14.5 |
Visual Studio Code | 1.35.1 |
やってみた
VSCodeに拡張機能を導入
下記の拡張機能を導入します。
設定変更:改行コードを変更する
現状は「auto」が挿入されてしまう
そのまま使うと、下記のようにauto
が挿入されてしまい、うまくできません。
<!-- TOC -->autoauto- [タイトル](#タイトル)auto - [あいうえお](#あいうえお)auto - [aaa](#aaa)auto - [bbb](#bbb)auto - [かきくけこ](#かきくけこ)auto - [いろはにほへと](#いろはにほへと)auto - [ちりぬるを](#ちりぬるを)auto - [さしすせそ](#さしすせそ)auto - [寿限無寿限無](#寿限無寿限無)auto - [五劫の擦り切れ](#五劫の擦り切れ)auto - [海砂利水魚](#海砂利水魚)auto - [たちつてと](#たちつてと)autoauto<!-- /TOC -->
Issuesとして報告されていますが、まだ未解決です。
上記のIssues内に対処法が書いていますので、その通りに実施します。
改行コードを変更する
設定画面を開きます。
eol
で検索します。
Files: Eol
の設定を下記に変更します。
OS | 設定値 |
---|---|
Windows | \r\n |
macOS | \n |
基本は上記でOKですが、ファイルで異なる場合は、下記のように個別対応してください。
(もしくは必要に応じて、Files: Eol
の設定を変更してください。)
設定変更:HTMLのアンカータグを付ける
デフォルトだとHTMLのアンカータグ(下記のやつ)が付かないため、ブラウザで目次を押してもジャンプできません。
<a id="any-name" name="any-name"></a>
そこで、設定を変更して、アンカータグが付くようにします。
さきほど開いた設定画面の右上にある{}
を選択し、設定画面(JSON)を開きます。
続いて、JSONに下記の項目を追加し、保存します。
"markdown-toc.insertAnchor": true
目次をつける!!
実験的に、適当なMarkdownを書きました。
# タイトル ## あいうえお ### aaa ### bbb ## かきくけこ ### いろはにほへと ### ちりぬるを ## さしすせそ ### 寿限無寿限無 ### 五劫の擦り切れ ### 海砂利水魚 ## たちつてと
VSCodeで目次を挿入したい位置にカーソルを移動し、右クリックしてMarkdown TOC: Insert/Update
を選択します。
コマンドパレットで>markdown toc insert/update
を探して実行してもOKです。
目次ができました!!!
<a id="markdown-タイトル" name="タイトル"></a> # タイトル <!-- TOC --> - [タイトル](#タイトル) - [あいうえお](#あいうえお) - [aaa](#aaa) - [bbb](#bbb) - [かきくけこ](#かきくけこ) - [いろはにほへと](#いろはにほへと) - [ちりぬるを](#ちりぬるを) - [さしすせそ](#さしすせそ) - [寿限無寿限無](#寿限無寿限無) - [五劫の擦り切れ](#五劫の擦り切れ) - [海砂利水魚](#海砂利水魚) - [たちつてと](#たちつてと) <!-- /TOC --> <a id="markdown-あいうえお" name="あいうえお"></a> ## あいうえお <a id="markdown-aaa" name="aaa"></a> ### aaa <a id="markdown-bbb" name="bbb"></a> ### bbb <a id="markdown-かきくけこ" name="かきくけこ"></a> ## かきくけこ <a id="markdown-いろはにほへと" name="いろはにほへと"></a> ### いろはにほへと <a id="markdown-ちりぬるを" name="ちりぬるを"></a> ### ちりぬるを <a id="markdown-さしすせそ" name="さしすせそ"></a> ## さしすせそ <a id="markdown-寿限無寿限無" name="寿限無寿限無"></a> ### 寿限無寿限無 <a id="markdown-五劫の擦り切れ" name="五劫の擦り切れ"></a> ### 五劫の擦り切れ <a id="markdown-海砂利水魚" name="海砂利水魚"></a> ### 海砂利水魚 <a id="markdown-たちつてと" name="たちつてと"></a> ## たちつてと
実際の画面がこちらです。目次をクリックすると、ジャンプできます!
さいごに
自分で作ろうかと思ってましたが、イイカンジの拡張機能があって良かったです!
個人的には、一番上の「タイトル」(h1タグ)の目次は不要だと思ってるので、消してます。